import React from 'react';
import { Modal, message } from 'antd';
import Api from 'Utils/api';
import './index.scss';

class CancelModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      taskId: 0,
    };
    this.showModal = ::this.showModal;
  }

  showModal(id) {
    this.setState({
      visible: true,
      taskId: id
    });
  }
  close() {
    this.setState({
      loading: false,
      visible: false,
    });
    this.props.handleModalClose();
  }

  handleOk() {
    const api = new Api({
      method: 'DELETE',
      path: `/tasks/${this.state.taskId}`,
      success: () => {
        this.setState({
          visible: false,
          loading: false,
        });
        this.props.goBack();
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }

  render() {
    return (
      <div>
        <Modal
          className="video-new-modal small-modal"
          title="取消任务"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={this.close.bind(this)}
          confirmLoading={this.state.loading}
          width={798}
          height={450}
          maskClosable={false}
        >
          <div className="content">
            取消任务后不能下达指令，不能收反馈，你确定要取消任务？
          </div>
        </Modal>
      </div>
    );
  }
}

export default CancelModal;
